
var banner = 'http://47.108.197.28:3000/banner';
var hot = `http://47.108.197.28:3000/top/playlist?order=hot`;
var album = `http://47.108.197.28:3000/top/album`;
var toplist = `http://47.108.197.28:3000/toplist/detail`;
var artist = `http://47.108.197.28:3000/artist/list`;
var dj = `http://47.108.197.28:3000/dj/toplist/popular`;

// 轮播
var index = 0;
var time;
function lunbo(){
    index++;
    if(index>5){
        index = 0;
    }
    $(".banner img").eq(index).fadeIn(100).siblings().fadeOut(100);
}

function play(){
    time = setInterval(lunbo,2000);
}

play();

$ajax({
    url:banner,
    success:res=>{
        var banners = res.banners;
        banners.slice(0,6).forEach(item=>{
            var {imageUrl} = item;
            console.log(imageUrl);
            var temple = `
                <img src="${imageUrl}" alt="">
            `
            $(".banner").append(temple);
        })
    }
})
$ajax({
    url: hot,
    success: res => {
        var playlists = res.playlists;
        playlists.slice(0, 8).forEach(item => {
            var {
                name,
                coverImgUrl,
                playCount
            } = item;
            playCount = Math.ceil(playCount / 1000) + "万";
            var temple = `
            <div>
                <img src="${coverImgUrl}" alt="">
                <div class="p-bottom">
                    <a href="" class="icon-play"></a>
                    <span class="icon-headset"></span>
                    <span class="nb">${playCount}</span>
                </div>
                <a href="">${name}</a>
            </div>`;
            $("#hot").append(temple);
        })
    }
})

$ajax({
    url: album,
    success: res => {
        var albums = res.albums;
        albums.slice(0, 5).forEach(item => {
            var {
                blurPicUrl,
                name,
                artist
            } = item;
            var artistName = artist.name;
            var temple = `
                <div class="new-cd inline-block">
                    <div class="cover relative">
                        <img src="${blurPicUrl}" class="absolute" alt="">
                        <a href="#" class="absolute"></a>
                    </div>
                    <p><a href="#">${name}</a></p>
                    <p><a href="#" class="gray">${artistName}</a></p>
                </div>
            `
            $("#album").append(temple);
        })
    }
})

$ajax({
    url: toplist,
    success: res => {
        var list = res.list;
        list.slice(0,3).forEach((item, index) => {
            var {
                tracks
            } = item;
            tracks.forEach((value, i) => {
                var {
                    first,
                    
                } = value;
                var temple = `
                    <td><span style ="color:red " >${i+1}</span>&nbsp;${first}</td>
                `;
                $(".tr").eq(i).append(temple);
            })
            var list = [];
        })
    }
})

$ajax({
    url: artist,
    success: res => {
        var artists = res.artists;
        artists.slice(0, 5).forEach(item => {
            var {
                name,
                alias,
                picUrl
            } = item;
            alias = alias.join(" ");
            var temple = `
                <div class="singer-list">
                    <a href="#">
                        <div class="singer-hd fl">
                            <img src="${picUrl}" alt="">
                        </div>
                        <div class="singer-id fl">
                            <p>${name}</p>
                            <span class="gray">${alias}</span>
                        </div>
                    </a>
                </div>
            `
            $(".enter").append(temple);
        })
    }
})

$ajax({
    url: dj,
    success: res => {
        var list = res.data.list;
        list.slice(0, 5).forEach(item => {
            var {
                nickName,
                avatarUrl
            } = item;
            var temple = `
                <div class="djer">
                    <a href="#" class="fl">
                        <img src="${avatarUrl}" alt="">
                    </a>
                    <div class="djer-id ">
                        <p><a href="#">${nickName}</a></p>
                    </div>
                </div>
            `
            $("#dj").append(temple);
        })
    }
})

// 搜索框
$("#search").keydown(function(event){
    var value = $(this).val();
    if(event.keyCode == 13 && value){
        location.href=`../网易云搜索.html?${value}`;
    }
})